<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>歌曲</title>
    <script src="/jquery-3.4.1.min.js"></script>
</head>
<body>
<img class="song-albumImg" th:src="${song.albumImg}">
<h1 class="song-name" th:text="${song.name}"></h1>
<a href="#" th:data-id="${song.id}" class="player-btn"> 播放</a>

<audio id="player" style="display: none;" src="" controls="controls"></audio>

    <h3>
    <label>歌手：</label>
    <span class="song-singer" th:text="${song.singer}"></span>
</h3>
<h3>
    <label>所属专辑：</label>
    <span class="song-albumName" th:text="${song.albumName}"></span>
</h3>
<h3>
    <label>评论数：</label>
    <span class="song-commentCount" th:text="${song.commentCount}"></span>
</h3>
<div class="song-lyrics" th:utext="${song.lyrics}"></div>

<h3>相似歌曲</h3>
<ul>
    <li class="like-song">
        <a th:if="${song.id  == '461347998'}" href="/songinfo?songId=440208476" class="change-song" data-id="461347998">That girl</a>
        <a th:if="${song.id  == '440208476'}" href="/songinfo?songId=461347998" class="change-song" data-id="440208476">Something Just Like This</a>
  <!--        <a href="#" class="player-btn" data-id="461347998"> 播放</a>  -->

    </li>
</ul>

<h1>评论</h1>

<form action="/comment/post" method="post">
    <input type="hidden" name="nickName" value="bmatch">
    <input type="hidden" name="songId" th:if="${song.id  == '440208476'}" value="440208476"/>
    <input type="hidden" name="songId" th:if="${song.id  == '461347998'}" value="461347998"/>
    <input name="content" type="text" style="width:80%;height:100px" placeholder="填写你的评论"/>
    <br/>
    <button type="submit">评论</button>
</form>

<h3>精彩评论</h3>
<ul th:each="comment:${comments}">
    <li>
        <img th:src="${comment.icon}"/>
        <span th:text="${comment.nickName}"></span>
        <span th:text="${comment.content}"></span>
    </li>
    <li>
        <label>评论时间:</label>
        <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"> </span>
        <label>点赞数</label>
        <a href="#" th:data-id="${comment.id}" class="like-btn">
            <span th:text="${comment.likeNum}"></span></a>
    </li>

</ul>

<script>
    $(function () {
        $(".player-btn").on('click', function (e) {
            e.preventDefault();
            var songId = $(this).data("id");
            $.ajax(
                {
                    url: "/song/music",
                    method: "GET",
                    data: {
                        songId: songId
                    },
                    cache: false
                })
                .done(function (data) {
                    $("#player").show();
                    $("#player").attr("src", data);
                    document.getElementById("player").play();
                })

        })

        //处理切换歌曲
        //    $(".change-song").on('click', function (e) {
        //      e.preventDefault();
        //    var songId = $(this).data("id");
        //  $.ajax(
        //    {
        //      url: "/songinfo/get",
        // method: "GET",
        //   data:
        // {
        //   songId: songId
        // },
        // cache: false
        //})
        //     .done(function (data) {
        //         $('.song-albumImg').attr('src', data.albumImg);
        //         $('.song-albumName').html(data.albumName);
        //         $('.song-commentCount').html(data.commentCount);
        //         $('.song-lyrics').html(data.lyrics);
        //         $('.song-name').html(data.name);
        //         $('.song-singer').html(data.singer);
        //     })

    //})


    })

</script>

<script>
    $(function(){
        $(".like-btn").on('click',function(e){
            e.preventDefault();
            var  self=$(this);
            var  commentId=self.data('id');
            $.ajax({
                url:"/comment/like",
                method:"POST",
                data:{
                    songId:"440208476",
                    commentId:commentId
                },
                cache:false
            })
                .done(function (data) {
                    self.html(data.likeNum);
                })
        })
    })
</script>


</body>
</html>